@import "~scss/_mixins";

$themePath: '~img/theme/dark';

html.themeDark {
	/* Text */

	--color-text-primary: #f8f8f8;
	--color-text-secondary: #9a9a9a;
	--color-text-tertiary: #656565;
	--color-text-inversion: #171717;

	/* Shape */

	--color-shape-primary: #313131;
	--color-shape-secondary: #292929;
	--color-shape-tertiary: #232323;

	--color-shape-highlight-dark: rgba(255, 255, 255, 0.11);
	--color-shape-highlight-medium: rgba(255, 255, 255, 0.05);
	--color-shape-highlight-light: rgba(255, 255, 255, 0.03);

	/* Control */

	--color-control-accent: #d4d4d4;
	--color-control-active: #737373;
	--color-control-inactive: #414141;
	--color-control-bg: #fff;

	/* Background */

	--color-bg-primary: #171717;
	--color-bg-secondary: #191919;
	--color-bg-loader: rgba(0,0,0,0.7);
	--color-bg-grey: #232323;
	--color-bg-yellow: #242317;
	--color-bg-orange: #262117;
	--color-bg-red: #2d1d18;
	--color-bg-pink: #2d1926;
	--color-bg-purple: #281c2c;
	--color-bg-blue: #1e2131;
	--color-bg-ice: #17252d;
	--color-bg-teal: #162827;
	--color-bg-lime: #202919;

	/* Tag */

	--color-tag-grey: var(--color-text-secondary);
	--color-tag-yellow: var(--color-yellow);
	--color-tag-orange: var(--color-orange);
	--color-tag-red: var(--color-red);
	--color-tag-pink: var(--color-pink);
	--color-tag-purple: var(--color-purple);
	--color-tag-blue: var(--color-blue);
	--color-tag-ice: var(--color-ice);
	--color-tag-teal: var(--color-teal);
	--color-tag-lime: var(--color-lime);

	--color-bg-tag-grey: #3c3c3c;
	--color-bg-tag-yellow: #55500d;
	--color-bg-tag-orange: #5f430a;
	--color-bg-tag-red: #74321e;
	--color-bg-tag-pink: #712055;
	--color-bg-tag-purple: #542663;
	--color-bg-tag-blue: #20295c;
	--color-bg-tag-ice: #19465f;
	--color-bg-tag-teal: #16534e;
	--color-bg-tag-lime: #36551d;

	/* System */

	--color-system-accent-125: #105aef;
	--color-system-accent-50: #224c9e;
	--color-system-accent-25: #18346e;
	--color-system-selection: rgba(24, 163, 241, 0.3);

	/* Common */

	@mixin shadow { box-shadow: 0px 4px 16px rgb(0 0 0 / 20%), 0px 0px 0px 1px #393933 inset; }

	body { color-scheme: dark; }

	.cover.type2.black { background-color: #000 !important; }

	::selection { background-color: var(--color-system-selection); }

	.bgColor-grey { background: var(--color-bg-grey) !important; }
	.bgColor-yellow { background: var(--color-bg-yellow) !important; }
	.bgColor-orange { background: var(--color-bg-orange) !important; }
	.bgColor-red { background: var(--color-bg-red) !important; }
	.bgColor-pink { background: var(--color-bg-pink) !important; }
	.bgColor-purple { background: var(--color-bg-purple) !important; }
	.bgColor-blue { background: var(--color-bg-blue) !important; }
	.bgColor-ice { background: var(--color-bg-ice) !important; }
	.bgColor-teal { background: var(--color-bg-teal) !important; }
	.bgColor-lime { background: var(--color-bg-lime) !important; }

	.isMultiSelect.tagColor-grey { color: var(--color-text-secondary) !important; background: var(--color-bg-tag-grey) !important; }
	.isMultiSelect.tagColor-yellow { color: var(--color-yellow) !important; background: var(--color-bg-tag-yellow) !important; }
	.isMultiSelect.tagColor-orange { color: var(--color-orange) !important; background: var(--color-bg-tag-orange) !important; }
	.isMultiSelect.tagColor-red { color: var(--color-red) !important; background: var(--color-bg-tag-red) !important; }
	.isMultiSelect.tagColor-pink { color: var(--color-pink) !important; background: var(--color-bg-tag-pink) !important; }
	.isMultiSelect.tagColor-purple { color: var(--color-purple) !important; background: var(--color-bg-tag-purple) !important; }
	.isMultiSelect.tagColor-blue { color: var(--color-blue) !important; background: var(--color-bg-tag-blue) !important; }
	.isMultiSelect.tagColor-ice { color: var(--color-ice) !important; background: var(--color-bg-tag-ice) !important; }
	.isMultiSelect.tagColor-teal { color: var(--color-teal) !important; background: var(--color-bg-tag-teal) !important; }
	.isMultiSelect.tagColor-lime { color: var(--color-lime) !important; background: var(--color-bg-tag-lime) !important; }

	.selectionTarget.isSelectionSelected::after, 
	.block.isSelectionSelected > .wrapContent > .selectionTarget::after 
	{ background-color: var(--color-system-selection); }

	.brokenMedia {
		img:before { background: var(--color-bg-secondary); }
	}

	.icon.import-notion { background-image: url('#{$themePath}/icon/import/notion.svg'); }
	.icon.import-roam { background-image: url('#{$themePath}/icon/import/roam.svg'); }
	.icon.import-obsidian { background-image: url('#{$themePath}/icon/import/obsidian.svg'); }
	.icon.import-protobuf { background-image: url('#{$themePath}/icon/import/protobuf.svg'); }

	.icon.widget-star { background-image: url('#{$themePath}/icon/widget/system/star.svg'); }
	.icon.widget-pin { background-image: url('#{$themePath}/icon/widget/system/pin.svg'); }
	.icon.widget-chat0 { background-image: url('#{$themePath}/icon/widget/system/chat0.svg'); }
	.icon.widget-chat1 { background-image: url('#{$themePath}/icon/widget/system/chat1.svg'); }
	.icon.widget-pencil { background-image: url('#{$themePath}/icon/widget/system/pencil.svg'); }
	.icon.widget-eye { background-image: url('#{$themePath}/icon/widget/system/eye.svg'); }
	.icon.widget-bin { background-image: url('#{$themePath}/icon/widget/system/bin.svg'); }
	.icon.widget-all { background-image: url('#{$themePath}/icon/widget/system/all.svg'); }

	.objectManagerWrapper {
		.icon.checkbox { background-image: url('#{$themePath}/icon/archive/checkbox0.svg') !important; }
		.icon.checkbox.active { background-image: url('#{$themePath}/icon/archive/checkbox1.svg') !important; }
		.icon.remove { background-image: url('#{$themePath}/icon/menu/action/remove0.svg'); }
		.icon.search { background-image: url('#{$themePath}/icon/menu/action/search0.svg'); }
	}

	#root-loader {
		.version { color: var(--color-text-primary); }
	}

	.toast { background: var(--color-shape-tertiary); color: var(--color-text-primary); }
	.toast {
		.inner {
			.buttons {
				.button { color: var(--color-text-primary); }
			}
		}
	}

	markupsearch { color: var(--color-bg-primary) !important; }
	markuphighlight { background: #044062 !important; }

	.onboardingDimmer { background-color: var(--color-text-inversion); opacity: 0.8; }
	.onboardingElement { background-color: #000 !important; }

	/* Components */

	.loaderWrapper {
		.dot { animation-name: dots-dark; }
	}

	.mediaAudio {
		.controls {
			.icon.play { background-image: url('#{$themePath}/icon/audio/play.svg'); }
			.icon.play.active { background-image: url('#{$themePath}/icon/audio/pause.svg'); }

			.icon.volume { background-image: url('#{$themePath}/icon/audio/volume.svg'); }
			.icon.volume.active { background-image: url('#{$themePath}/icon/audio/mute.svg'); }
			
			.icon.volume.muted { background-image: url('#{$themePath}/icon/audio/mute.svg'); }
		}
	}

	.switch { background: var(--color-shape-secondary); }
	.switch {
		.inner { background-color: #fff; }
	}

	/* Button */

	.button.black { background: var(--color-control-accent); color: var(--color-text-inversion); }
	.button.black:not(.disabled):hover,
	.button.black:not(.disabled).hover { background: var(--color-control-active); }
	.button.black {
		.arrow { background-image: url('~img/arrow/button/black.svg'); }
	}

	.button.blank { color: var(--color-text-primary); border-color: var(--color-shape-primary); }
	.button.blank:not(.disabled):hover,
	.button.blank:not(.disabled).hover { border-color: var(--color-shape-primary); background: var(--color-shape-highlight-medium); }

	.button.red,
	.button.red.blank { background: none; }

	.button.red:not(.disabled):hover,
	.button.red:not(.disabled).hover,
	.button.red.blank:not(.disabled):hover,
	.button.red.blank:not(.disabled).hover { border-color: #581f0c; background: #311107; }

	.filter {
		.icon.clear { background-image: url('#{$themePath}/icon/clear0.svg') !important; }
		.icon.clear:hover { background-image: url('#{$themePath}/icon/clear1.svg') !important; }
	}
	.filter.outlined {
		.icon.clear { background-image: url('#{$themePath}/icon/filter/clear0.svg') !important; }
		.icon.clear:hover { background-image: url('#{$themePath}/icon/filter/clear1.svg') !important; }
	}

	.textarea { background: none; }
	.textareaWrap { background-color: var(--color-bg-secondary); }

	.select {
		.icon.arrow { background-image: url('#{$themePath}/arrow/select/dark.svg') !important; }
	}

	.inputWithFile { border-color: transparent; background-color: var(--color-shape-highlight-medium); }
	.input-drag-vertical { background-color: var(--color-bg-secondary); }

	.input-drag-horizontal {
		.fill { background: var(--color-text-primary); }
		.icon { border-color: var(--color-text-secondary); }
	}

	.dragWrap {
		.number { color: var(--color-text-primary); }
	}

	.listObjectPreview {
		.icon.arrow { background-image: url('#{$themePath}/arrow/template0.svg'); }
		.icon.arrow:hover { background-image: url('#{$themePath}/arrow/template1.svg'); }
		.icon.arrow.disabled:hover { background-image: url('#{$themePath}/arrow/template0.svg'); }
	}

	/* PreviewObject */

	.previewObject {
		.icon.logo { background-image: url('#{$themePath}/icon/type/logo.svg'); }
		.heading {
			.iconObject.isTask, .iconObject.isBookmark { background-color: unset; }
		}

		.blocks {
			.element {
				.inner {
					.icon.hl { background-image: url('#{$themePath}/icon/object/preview/hl.svg'); }
				}
			}
		}
	}

	/* Preview */

	.previewWrapper {
		.content { background: var(--color-bg-secondary); }
	}

	.previewGraph { background: var(--color-bg-secondary); @include shadow; }

	/* Pager */

	.pager {
		.icon.arrow { background-image: url('#{$themePath}/arrow/pager0.svg'); }
		.icon.arrow:hover { background-image: url('#{$themePath}/arrow/pager1.svg'); }
		.icon.arrow.disabled:hover { background-image: url('#{$themePath}/arrow/pager0.svg'); }

		.icon.arrow.end { background-image: url('#{$themePath}/arrow/pagerEnd0.svg'); }
		.icon.arrow.end:hover { background-image: url('#{$themePath}/arrow/pagerEnd1.svg'); }
		.icon.arrow.end.disabled:hover { background-image: url('#{$themePath}/arrow/pagerEnd0.svg'); }
	}

	/* Progress */

	.progress {
		.inner { background: var(--color-bg-secondary); box-shadow: 0px 4px 16px rgb(0 0 0 / 20%), 0px 0px 0px 1px var(--color-shape-primary) inset; }
	}

	.tooltip { color: var(--color-text-primary); }
	.tooltip.big { background: var(--color-bg-secondary); border: 1px solid rgba(229, 229, 229, 0.1); }

	/* Icon */

	.icon.ghost { background-image: url('#{$themePath}/icon/ghost.svg'); }

	.icon.settings-personal { background-image: url('#{$themePath}/icon/settings/personal.svg'); }
	.icon.settings-storage { background-image: url('#{$themePath}/icon/settings/storage.svg'); }
	.icon.settings-phrase { background-image: url('#{$themePath}/icon/settings/phrase.svg'); }
	.icon.settings-pin { background-image: url('#{$themePath}/icon/settings/pin.svg'); }
	.icon.settings-spaces { background-image: url('#{$themePath}/icon/settings/spaces.svg'); }
	.icon.settings-membership { background-image: url('#{$themePath}/icon/settings/membership.svg'); }
	.icon.settings-language { background-image: url('#{$themePath}/icon/settings/language.svg'); }
	.icon.settings-api { background-image: url('#{$themePath}/icon/settings/api.svg'); }
	.icon.settings-sites { background-image: url('#{$themePath}/icon/settings/sites.svg'); }
	.icon.settings-space { background-image: url('#{$themePath}/icon/settings/overview.svg'); }
	.icon.settings-members { background-image: url('#{$themePath}/icon/settings/members.svg'); }
	.icon.settings-import { background-image: url('#{$themePath}/icon/settings/import.svg'); }
	.icon.settings-export { background-image: url('#{$themePath}/icon/settings/export.svg'); }
	.icon.settings-type { background-image: url('#{$themePath}/icon/settings/type.svg'); }
	.icon.settings-relation { background-image: url('#{$themePath}/icon/settings/relation.svg'); }
	.icon.settings-bin { background-image: url('#{$themePath}/icon/settings/bin.svg'); }

	/* Editor */

	.editorWrapper {
		.editor {
			.icon.buttonAdd { background-image: url('#{$themePath}/icon/block/add0.svg'); }
			.icon.buttonAdd:hover { background-image: url('#{$themePath}/icon/block/add1.svg'); }
		}

		.dragWrap {
			.number { color: var(--color-text-primary); }
			.input-drag-horizontal {
				.back { background: rgba(255,255,255,0.5); }
				.fill { background: var(--color-text-primary); }
				.icon { border-color: var(--color-text-primary); }
			}
		}
	}

	/* EditorControls */

	.editorControls {
		.btn {
			.icon.icon { background-image: url('#{$themePath}/icon/add/icon0.svg'); }
			.icon.addCover { background-image: url('#{$themePath}/icon/add/cover0.svg'); }
			.icon.layout { background-image: url('#{$themePath}/icon/add/layout0.svg'); }
			.icon.relation { background-image: url('#{$themePath}/icon/add/relation0.svg');  }
		}
		.btn:hover, .btn.hover {
			.icon.icon { background-image: url('#{$themePath}/icon/add/icon1.svg'); }
			.icon.addCover { background-image: url('#{$themePath}/icon/add/cover1.svg'); }
			.icon.layout { background-image: url('#{$themePath}/icon/add/layout1.svg'); }
			.icon.relation { background-image: url('#{$themePath}/icon/add/relation1.svg');  }
		}
	}

	/* Header */

	.header.authIndex {
		.logo { background: url('~img/logo/white.svg'); }
	}

	.header.isCommon {
		.path { border: 0px; line-height: 28px; }
		.headerBanner.withMenu:after { background-image: url('~img/arrow/button/white.svg'); }
	}

	.header.mainSettings {
		.identity {
			.icon.anyName { background-image: url('#{$themePath}/icon/header/anyName.svg'); }
		}
	}

	/* Vault */

	.vault { background-color: #393939; }
	.vault {
		.item.isButton {
			.iconWrap { background-color: #4f4f4f; }
		}

		.item.gallery {
			.iconWrap { background-image: url('#{$themePath}/icon/vault/gallery.svg'); }
		}

		.item.add {
			.iconWrap { background-image: url('#{$themePath}/icon/vault/plus.svg'); }
		}

		.item.settings {
			.iconWrap { background-color: unset; background-image: url('#{$themePath}/icon/vault/settings.svg'); }
		}
	}

	.onboardingElement.onboardingVaultItem { background-color: unset !important; }
	.onboardingElement.onboardingVaultItem {
		.iconWrap { background-color: #000000 !important; }
	}

	/* Sidebar */

	.sidebar { box-shadow: 0px 4px 16px rgba(0,0,0,0.2); }
	.sidebar.fixed { box-shadow: 0px 0px rgba(0,0,0,0); }
	.sidebar {
		.icon.back { background-image: url('#{$themePath}/icon/widget/back0.svg'); }
		.icon.back:hover { background-image: url('#{$themePath}/icon/widget/back1.svg'); }

		> .sidebarPage {
			> .subHead {
				.icon.back:hover { background-image: url('#{$themePath}/icon/widget/back1.svg'); }
				.icon.create { background-image: url('#{$themePath}/icon/widget/button/create.svg'); }
				.icon.arrow { background-image: url('#{$themePath}/icon/widget/button/arrow.svg'); }
			}

			> .body {
				.group {
					> .titleWrap {
						.icon.question { background-image: url('#{$themePath}/icon/sidebar/question.svg'); }
					}
				}
			}
		}
		
		> .sidebarPage.pageAllObject {
			> .inner {
				> .head {
					.titleWrap {
						.icon.back { background-image: url('#{$themePath}/icon/widget/back0.svg'); }
						.icon.more { background-image: url('#{$themePath}/icon/menu/action/more0.svg'); }
						.icon.more:hover { background-image: url('#{$themePath}/icon/menu/action/more1.svg'); }
					}
					.tabs {
						.swiper-button-prev, .swiper-button-next {
							&::before { background-image: url('#{$themePath}/arrow/sidebarObjectTab0.svg'); }
							&:hover::before { background-image: url('#{$themePath}/arrow/sidebarObjectTab1.svg'); }
						}
					}
				}
			}
		}

		> .containerSettings {
			> .body {
				.list {
					> .head {
						.icon.back { background-image: url('#{$themePath}/icon/widget/back0.svg'); }
						.icon.more { background-image: url('#{$themePath}/icon/menu/action/more0.svg'); }

						.icon.back:hover { background-image: url('#{$themePath}/icon/widget/back1.svg'); }
						.icon.more:hover { background-image: url('#{$themePath}/icon/menu/action/more1.svg'); }
					}
					.toggle {
						.icon.arrow { background-image: url('#{$themePath}/arrow/select/dark.svg'); }
					}
				}

				.logout {
					.icon { background-image: url('#{$themePath}/icon/popup/settings/logout.svg'); }
				}
			}
		}

		> .sidebarPage.pageWidget {
			> .bottom {
				.icon.settings:hover { background-image: url('#{$themePath}/icon/widget/button/widgetSettings1.svg'); }
			}
			.spaceHeader {
				.buttons {
					.item {
						.icon.add { background-image: url('#{$themePath}/icon/sidebar/chatSpace/add.svg'); }
						.icon.chat { background-image: url('#{$themePath}/icon/sidebar/chatSpace/chat.svg'); }
						.icon.mute.on { background-image: url('#{$themePath}/icon/sidebar/chatSpace/pushOn.svg'); }
						.icon.mute.off { background-image: url('#{$themePath}/icon/sidebar/chatSpace/pushOff.svg'); }
					}
				}
			}
		}
	}

	/* Notifications */

	.notifications {
		.head {
			.icon { border-color: var(--color-bg-secondary); }
		}

		.notification {	background: var(--color-bg-secondary); @include shadow; border: 0px; }

		.notification {
			.icon.delete { background-color: var(--color-bg-secondary); }
		}
	}

	.banner { border: 1px solid var(--color-shape-highlight-dark); }
	.banner {
		.icon.close { background-image: url('#{$themePath}/icon/banner/close.svg'); }
	}
	.banner.sidebarUpdateBanner {
		.button:before { background-image: url('#{$themePath}/icon/banner/download.svg'); }
	}

	/* Share Tooltip */
	.shareTooltip { background: var(--color-bg-secondary); @include shadow; }
	.shareTooltip {
		.icon.smile { background-image: url('#{$themePath}/icon/share/smile.svg'); }
		.icon.close { background-color: var(--color-bg-secondary); }
	}

	.emptyState {
		.icon { background-image: url('#{$themePath}/icon/chat/emptyState.svg'); }
	}

	#menuBar {
		.icon.window-menu { background-image: url('#{$themePath}/icon/window/menu.svg') !important; }
		.icon.window-min { background-image: url('#{$themePath}/icon/window/min.svg') !important; }
		.icon.window-max { background-image: url('#{$themePath}/icon/window/max.svg') !important; }
		.icon.window-close { background-image: url('#{$themePath}/icon/window/close.svg') !important; }
	}

	/* Key Phrase */
	.phraseWrapper {
		.icon.show:hover { background-image: url('#{$themePath}/icon/keyphrase/hide1.svg'); }

		&.isHidden {
			.icon.show:hover { background-image: url('#{$themePath}/icon/keyphrase/see1.svg'); }
		}
	}

	@import "./menu";
	@import "./popup";
	@import "./page";
	@import "./block";
	@import "./widget";
}
